<template>
    <div>
        <div class="search">
            <input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音">
        </div>
        <div v-show="keyword" class="search-content" ref="search">
            <ul>
                <li class="search-item border-bottom" 
                v-for="item of list" 
                :key="item.id"
                @click="cityClick(item.name)"
                >{{item.name}}</li>
                <li class="search-item border-bottom" v-show="hasNoData">
                    搜索没有结果
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
   name: 'CitySearch',
   props: {
       cities:Object
   },
   data () {
       return {
           keyword: '',
           list: [],
           timer: null
       }
   },
   computed: {
       hasNoData () {
           return !this.list.length
       }
   },
   watch: {
       keyword () {
           if(this.timer) {
               clearTimeout(this.timer)
           }
           if (!this.keyword) {
               this.list = []
               return
           }
           this.timer = setTimeout( () => {
               const result = []
               for (let i in this.cities) {
                   this.cities[i].forEach((value) => {
                       if (value.spell.indexOf(this.keyword) > -1 ||
                       value.name.indexOf(this.keyword) > -1) {
                           result.push(value)
                       }
                   })
               }
               this.list = result
           }, 100)
       }
   },
   methods: {
    cityClick (data) {
        this.$store.dispatch('changeCity', data)
        this.$router.push('/')
     }
   },
   mounted () {
       this.scroll = new Bscroll(this.$refs.search)
       
   }
}
</script>

<style lang="stylus" scoped>
    @import '~styles/varibles.styl'
    .search
        height: .72rem
        padding: 0 .1rem
        background: $bgColor
        .search-input
            box-sizing: border-box
            width: 100%
            height: .62rem
            padding: 0 .1rem
            line-height: .62rem
            text-align: center
            border-radius: .06rem
    .search-content
        z-index: 1
        overflow: hidden
        position: absolute
        top: 1.58rem
        left: 0
        right: 0
        bottom: 0
        background: #eee
        .search-item
            line-height: .62rem
            padding-left: .2rem
            background: #fff
            color: #444



</style>